<template>
  <div class="approve-details">
    <el-dialog :visible.sync="open" width="1200px" top="10vh" append-to-body :title="title" :before-close="handleClose" custom-class="approve-details-dialog">
      <div :class="`approve-body ${historyClosed ? 'closed' : ''}`">
        <div class="approve-body-left">
          <process-progress :process-list="processList">
            <div slot="right" class="lichengbei-content">
              <svg-icon icon-class="lichengbei" class-name="lichengbei-icon" />
              <span class="lichengbei-text" @click="handleMilepost">项目里程碑</span>
            </div>
          </process-progress>
          <div class="approve-details">
            <el-form ref="form" :model="form">
              <el-form-item label="标题">{{ form.title }}</el-form-item>
              <el-form-item label="标题">
                <file-preview :file-list="form.fileLists" />
              </el-form-item>
            </el-form>
            <comment :business-id="form.id" business-key="report_item" />
          </div>
          <div v-if="tabType" class="approve-operate">
            <el-button type="primary" size="small">同 意</el-button>
            <el-button type="danger" size="small">拒 绝</el-button>
          </div>
        </div>
        <div class="approve-body-right">
          <div class="approve-history">
            <div class="approve-process">审批进程</div>
            <approve-list :process-approve="processApprove" />
            <span class="close-btn" @click="historyClosed = !historyClosed">
              <i :class="`${historyClosed ? 'el-icon-arrow-left' : 'el-icon-arrow-right'}`" />
            </span>
          </div>
        </div>
      </div>

      <el-dialog :visible.sync="milepostOopen" width="480px" top="20vh" append-to-body title="里程碑" :before-close="handleMilepostClose">
        <milepost :milepost-list="milepostList" />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Comment from '@/components/Comment';
export default {
  components: { Comment },
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '详 情',
    },
    formData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: { fileLists: [] },
      milepostOopen: false,
      historyClosed: false,
      tabType: 'MyApprove',
      processList: [
        {
          id: 'start',
          name: '发起人',
          type: null,
          camundaType: 'startEvent',
          userIds: null,
          userInfoVos: null,
          setType: null,
          selectMode: null,
          selectRange: null,
          examineMode: null,
          state: '2',
          optionUserIds: null,
          optionUserInfos: null,
        },
        {
          id: 'approver_1',
          name: '部门领导审批',
          type: null,
          camundaType: 'userTask',
          userIds: ['3', '8', '12', '6'],
          userInfoVos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '陕文投',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '6',
              deptId: '1',
              roleIds: null,
              username: 'baijunke',
              nickname: '拜军科',
              deptName: '陕文投1',
              avatar: null,
            },
            {
              userId: '8',
              deptId: '1',
              roleIds: null,
              username: 'liuyunyun',
              nickname: '柳云云',
              deptName: '陕文投',
              avatar: '/admin/sys-file/digital-xiwei/6cbd7f5998264c78abc18c3553cea445.jpeg',
            },
            {
              userId: '12',
              deptId: '1',
              roleIds: null,
              username: '18789470907',
              nickname: '运维-小拜',
              deptName: '陕文投',
              avatar: null,
            },
          ],
          setType: null,
          selectMode: null,
          selectRange: null,
          examineMode: 1,
          state: '1',
          optionUserIds: null,
          optionUserInfos: null,
        },
        {
          id: 'approver_2',
          name: '总经理审批',
          type: null,
          camundaType: 'userTask',
          userIds: ['6', '12'],
          userInfoVos: [
            {
              userId: '6',
              deptId: '1',
              roleIds: null,
              username: 'baijunke',
              nickname: '拜军科',
              deptName: '陕文投1',
              avatar: null,
            },
            {
              userId: '12',
              deptId: '1',
              roleIds: null,
              username: '18789470907',
              nickname: '运维-小拜',
              deptName: '陕文投',
              avatar: null,
            },
          ],
          setType: null,
          selectMode: null,
          selectRange: null,
          examineMode: null,
          state: '0',
          optionUserIds: null,
          optionUserInfos: null,
        },
        {
          id: 'copy_3',
          name: '抄送人',
          type: null,
          camundaType: 'serviceTask',
          userIds: [],
          userInfoVos: null,
          setType: null,
          selectMode: null,
          selectRange: null,
          examineMode: null,
          state: '0',
          optionUserIds: null,
          optionUserInfos: null,
        },
        {
          id: 'end',
          name: '流程结束',
          type: null,
          camundaType: 'endEvent',
          userIds: null,
          userInfoVos: null,
          setType: null,
          selectMode: null,
          selectRange: null,
          examineMode: null,
          state: '0',
          optionUserIds: null,
          optionUserInfos: null,
        },
      ],
      milepostList: [
        {
          id: 14,
          parentId: 0,
          weight: 1,
          name: '项目立项',
          milestoneKey: 'project',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          display: true,
          children: [
            {
              id: 22,
              parentId: 14,
              weight: 1,
              name: '业务申请',
              milestoneKey: 'biz_business_apply',
              processStatus: '0',
              weightNum: 5.56,
              finishState: '1',
              status: '0',
            },
            {
              id: 23,
              parentId: 14,
              weight: 2,
              name: '立项报告',
              milestoneKey: 'biz_project_report',
              processStatus: '0',
              weightNum: 5.56,
              finishState: '1',
              status: '0',
            },
          ],
        },
        {
          id: 15,
          parentId: 0,
          weight: 2,
          name: '风控管理',
          milestoneKey: 'risk',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          display: true,
          children: [
            {
              id: 25,
              parentId: 15,
              weight: 1,
              name: '项目审查报告',
              milestoneKey: 'risk_xiangMuShenChaBaoGao',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
              finishState: '1',
              finishTime: '2021-09-08 12:01:24',
              distinct: false,
            },
            {
              id: 25,
              parentId: 15,
              weight: 1,
              name: '项目审查报告',
              milestoneKey: 'risk_xiangMuShenChaBaoGao',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
              distinct: false,
              finishState: '1',
              finishTime: '2021-09-08 12:26:47',
            },
            {
              id: 26,
              parentId: 15,
              weight: 2,
              name: '客户尽调资料',
              milestoneKey: 'risk_KeHuJinDiaoZiLiao',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
              finishState: '1',
              finishTime: '2021-09-08 12:23:19',
              distinct: false,
            },
            {
              id: 27,
              parentId: 15,
              weight: 3,
              name: '风控尽调资料',
              milestoneKey: 'risk_fengKongJinDiaoZiLiao',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
            },
            {
              id: 28,
              parentId: 15,
              weight: 4,
              name: '评审会议纪要',
              milestoneKey: 'risk_pingShenHuiYiJiYao',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
              finishState: '1',
              finishTime: '2021-09-08 13:03:27',
              distinct: false,
            },
            {
              id: 29,
              parentId: 15,
              weight: 5,
              name: '风控决议',
              milestoneKey: 'risk_fengKongJueYi',
              processStatus: '0',
              weightNum: 3.33,
              status: '0',
            },
          ],
        },
        {
          id: 17,
          parentId: 0,
          weight: 3,
          name: '签约审核',
          milestoneKey: 'contract',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          display: true,
          children: [
            {
              id: 31,
              parentId: 17,
              weight: 1,
              name: '合同审批',
              milestoneKey: 'contract_heTongShenPi',
              processStatus: '0',
              weightNum: 16.67,
              status: '0',
            },
          ],
        },
        {
          id: 18,
          parentId: 0,
          weight: 4,
          name: '协议履约',
          milestoneKey: 'trade',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          display: true,
          children: [
            {
              id: 32,
              parentId: 18,
              weight: 1,
              name: '采购单',
              milestoneKey: 'trade_caiGouDan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 33,
              parentId: 18,
              weight: 2,
              name: '销货单',
              milestoneKey: 'trade_XiaoHuoDan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 35,
              parentId: 18,
              weight: 3,
              name: '入库单',
              milestoneKey: 'trade_ruKuDan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 36,
              parentId: 18,
              weight: 4,
              name: '出库单',
              milestoneKey: 'trade_chuKuDan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 37,
              parentId: 18,
              weight: 5,
              name: '支出结算',
              milestoneKey: 'trade_zhiChuJieSuan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 38,
              parentId: 18,
              weight: 6,
              name: '收入结算',
              milestoneKey: 'trade_shouRuJieSuan',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 39,
              parentId: 18,
              weight: 7,
              name: '付款申请',
              milestoneKey: 'trade_fuKuanShenQing',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 40,
              parentId: 18,
              weight: 8,
              name: '收款提报',
              milestoneKey: 'trade_shouKuanTiBao',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 41,
              parentId: 18,
              weight: 9,
              name: '进项票接收',
              milestoneKey: 'trade_jinXiangPiaoJieShou',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
            {
              id: 42,
              parentId: 18,
              weight: 10,
              name: '开票申请',
              milestoneKey: 'trade_kaiPiaoShenQing',
              processStatus: '0',
              weightNum: 1.67,
              status: '0',
            },
          ],
        },
        {
          id: 19,
          parentId: 0,
          weight: 5,
          name: '资料存档',
          milestoneKey: 'doc',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          display: true,
          children: [
            {
              id: 43,
              parentId: 19,
              weight: 1,
              name: '项目资料归档',
              milestoneKey: 'doc_ziLiaoGuDang',
              processStatus: '0',
              weightNum: 16.67,
              status: '0',
            },
          ],
        },
        {
          id: 20,
          parentId: 0,
          weight: 6,
          name: '项目终止',
          milestoneKey: 'finish_end',
          processStatus: '0',
          weightNum: 16.67,
          status: '0',
          finishState: '1',
          finishTime: '2021-09-17 16:59:17',
          display: true,
        },
      ],
      processApprove: [
        {
          title: '提交申请',
          userInfos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '待审批',
          type: 'start',
          comment: null,
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
        {
          title: '审批',
          userInfos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '同意',
          type: 'completed',
          comment: null,
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
        {
          title: '审批',
          userInfos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '拒绝',
          type: 'reject',
          comment: null,
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
        {
          title: '决议变更',
          userInfos: [
            {
              userId: '91',
              deptId: '1',
              roleIds: null,
              username: 'WT8888',
              nickname: '总经理',
              deptName: '陕文投1',
              avatar: null,
            },
          ],
          approvalStatus: null,
          type: 'change',
          comment: '测试',
          handleTime: '2021-12-28 21:11:09',
          changeData: [
            {
              changeType: '变更',
              name: '风控经办人',
              beforeValue: '管理员阿威',
              afterValue: '总经理',
              type: 'String',
              sort: 0,
            },
            {
              changeType: '变更',
              name: '占资额度',
              beforeValue: '0',
              afterValue: '111',
              type: 'String',
              sort: 1,
            },
            {
              changeType: '变更',
              name: '收益预计',
              beforeValue: '',
              afterValue: '12',
              type: 'String',
              sort: 2,
            },
            {
              changeType: '变更',
              name: '客户信息 第1行',
              beforeValue: '信用额度(万元)=100',
              afterValue: '信用额度(万元)=1001',
              type: 'String',
              sort: 3.1,
            },
            {
              changeType: '变更',
              name: '供应商信息 第1行',
              beforeValue: '信用额度(万元)=100',
              afterValue: '信用额度(万元)=1001',
              type: 'String',
              sort: 4.1,
            },
            {
              changeType: '变更',
              name: '账期',
              beforeValue: '',
              afterValue: '111',
              type: 'String',
              sort: 5,
            },
            {
              changeType: '变更',
              name: '支付方式',
              beforeValue: '',
              afterValue: '银行电汇,纸质银承,纸质商承',
              type: 'String',
              sort: 6,
            },
            {
              changeType: '变更',
              name: '付款条件',
              beforeValue: '',
              afterValue: '12321',
              type: 'String',
              sort: 7,
            },
            {
              changeType: '变更',
              name: '开票条件',
              beforeValue: '',
              afterValue: '3213',
              type: 'String',
              sort: 8,
            },
            {
              changeType: '变更',
              name: '收取保证金比例',
              beforeValue: '',
              afterValue: '3123',
              type: 'String',
              sort: 9,
            },
            {
              changeType: '变更',
              name: '风控措施 第1行',
              beforeValue: '措施内容=风控',
              afterValue: '措施内容=风控1',
              type: 'String',
              sort: 11.1,
            },
            {
              changeType: '新增',
              name: '风控措施 第2行',
              beforeValue: '',
              afterValue: '措施内容=3213',
              type: 'String',
              sort: 11.2,
            },
            {
              changeType: '新增',
              name: '风控措施 第3行',
              beforeValue: '',
              afterValue: '措施内容=32132',
              type: 'String',
              sort: 11.3,
            },
            {
              changeType: '变更',
              name: '合作建议',
              beforeValue: '',
              afterValue: '3213',
              type: 'String',
              sort: 12,
            },
            {
              changeType: '变更',
              name: '备注',
              beforeValue: '',
              afterValue: '123213',
              type: 'String',
              sort: 13,
            },
            {
              changeType: '变更',
              name: '附件',
              beforeValue: '',
              afterValue: [
                {
                  bucketName: 'digital-xiwei',
                  fileName: '8c33d1abc6e3439dad6c7154f5171748.png',
                  name: '670.png',
                  state: 'public',
                  url: '/admin/sys-file/digital-xiwei/8c33d1abc6e3439dad6c7154f5171748.png',
                },
              ],
              type: 'File',
              sort: 14,
            },
          ],
        },
        {
          title: '审批',
          userInfos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '待审批',
          type: 'wait',
          comment: null,
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
        {
          title: '修改',
          userInfos: [
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '编辑',
          type: 'edit',
          comment: null,
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
        {
          title: '审核人',
          userInfos: [
            {
              userId: '95',
              deptId: '15',
              roleIds: null,
              username: 'WT0006',
              nickname: '管理员阿刚',
              deptName: '财务部',
              avatar: '/admin/sys-file/digital-xiwei/f303ce9c9f5c4147b3fc4ce260842de2.jpg',
            },
          ],
          approvalStatus: '拒绝',
          type: 'reject',
          comment: 'sadfgascdvffxsacxv',
          attachments: [
            {
              bucketName: 'digital-xiwei',
              name: '1221 - 副本 - 副本 - 副本 - 副本 (3).pdf',
              fileName: '8dca4e0a15ea499bae4fdc11bd7681f5.pdf',
              url: '/admin/sys-file/digital-xiwei/8dca4e0a15ea499bae4fdc11bd7681f5.pdf',
              state: 'public',
            },
            {
              bucketName: 'digital-xiwei',
              name: '头像 男孩.png',
              fileName: '7e2cc7ca7248467ba822126008926058.png',
              url: '/admin/sys-file/digital-xiwei/7e2cc7ca7248467ba822126008926058.png',
              state: 'public',
            },
            {
              bucketName: 'digital-xiwei',
              name: '头像 女孩.png',
              fileName: '9a88e85e1d7f4c4bae47ecd730e54e45.png',
              url: '/admin/sys-file/digital-xiwei/9a88e85e1d7f4c4bae47ecd730e54e45.png',
              state: 'public',
            },
            {
              bucketName: 'digital-xiwei',
              name: '76449bc470fb434ebc8d60cb6fa04b30.jfif',
              fileName: '6fb5cc411f2a47a1a2ea26faa18b1a4c.jfif',
              url: '/admin/sys-file/digital-xiwei/6fb5cc411f2a47a1a2ea26faa18b1a4c.jfif',
              state: 'public',
            },
          ],
          handleTime: '2022-01-18 14:20:35',
          changeData: null,
        },
        {
          title: '抄送',
          userInfos: [
            {
              userId: '2',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '3',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '4',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '5',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '6',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
            {
              userId: '7',
              deptId: '1',
              roleIds: null,
              username: 'wangminggang',
              nickname: '王明钢',
              deptName: '山东',
              avatar: '/admin/sys-file/digital-xiwei/00eeb21922c44c75a33e4dc5ac28b2e0.jpg',
            },
          ],
          approvalStatus: '待查阅',
          type: 'cc',
          comment: 'sdsvghoijdsvguhjkdscxxh我是备注',
          handleTime: '2021-09-22 15:04:26',
          changeData: null,
        },
      ],
    };
  },
  computed: {},
  watch: {
    formData: 'resetForm',
    open: function () {
      this.historyClosed = false;
    },
  },
  created() {},
  mounted() {},
  methods: {
    resetForm() {
      const form = {
        fileLists: [
          { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/bff6fc5380364eeaa211d4443fbb08b7.png' },
          { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/1e2a1b0a9eba4bdaa9ddd9c0fa3cd355.doc' },
          { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/598440c0ef0a49829eae54c6dfd6b8b9.xlsx' },
          { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/65c12b5d3d714817b5da2b8d3b3b4193.zip' },
          { url: 'http://wentou.xvkeji.com/admin/sys-file/digital-xiwei/b7d668327aa94c5db26d06d0ee5c0a04.pdf' },
        ],
      };
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.resetFields();
          setTimeout(() => {
            this.form = Object.assign({}, form, this.formData);
          });
        } else {
          this.form = Object.assign({}, form, this.formData);
        }
      });
    },
    handleClose() {
      this.$emit('close');
    },
    handleMilepost() {
      this.milepostOopen = true;
    },
    handleMilepostClose() {
      this.milepostOopen = false;
    },
  },
};
</script>

<style scoped lang="scss">
.approve-details {
}
</style>

<style lang="scss">
.el-dialog__wrapper {
  .approve-details-dialog {
    .el-dialog__body {
      padding: 0;
      .approve-body {
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        .approve-body-left {
          flex: 1;
          min-height: 680px;
          display: flex;
          flex-direction: column;
          .process-progress {
            margin: 10px 20px;
            .lichengbei-content {
              font-size: 16px;
              font-weight: 600;
              .lichengbei-icon {
                margin-right: 10px;
                color: #f59a23;
              }
              .lichengbei-text {
                line-height: 67px;
                color: #2ca6fc;
                cursor: pointer;
              }
            }
          }
          .approve-details {
            flex: 1;
            width: 100%;
            padding: 0 20px;
            border-top: 1px solid #f2f6fc;
            border-bottom: 1px solid #f2f6fc;
          }
          .approve-operate {
            width: 100%;
            height: 56px;
            padding: 12px;
            background: #fff;
            display: flex;
            align-items: center;
          }
        }
        .approve-body-right {
          width: 260px;
          transition: width 0.5s ease;
          background: #f5f7fa;
          border-left: 1px solid #f2f6fc;
          .approve-history {
            width: 260px;
            min-height: 680px;
            height: 100%;
            position: relative;
            .approve-process {
              width: 260px;
              height: 42px;
              line-height: 42px;
              padding: 0 12px;
            }
            .approve-list {
              width: 260px;
              padding: 0;
              // position: absolute;
              // top: 0;
              // bottom: 0;
              // left: 0;
              // right: 0;
            }
            .close-btn {
              width: 20px;
              height: 84px;
              line-height: 84px;
              font-size: 12px;
              text-align: center;
              position: absolute;
              top: 50%;
              left: -18px;
              margin-top: -42px;
              background-image: url('../../assets/image/clonse-btn.png');
              background-repeat: no-repeat;
              background-size: 20px 84px;
              background-position: center right;
              cursor: pointer;
              &:hover {
                color: #409eff;
              }
            }
          }
        }
        &.closed {
          .approve-body-right {
            width: 0;
          }
        }
      }
    }
  }
}
</style>
